<template>
  <div id="index">
    <div class="list">
      <div class="item" v-for="(item, index) in data" :key="index">
        <img :src="item.img" alt="">
        <div class="info">
          <span class="title">{{item.title}}</span>
          <span class="time">{{item.time}}</span>
        </div>
        <button class="btn" @click="toAnswerDetail(item)">开始答题</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Data from './data/data'
  export default {
    name: "index",
    data(){
      return{
        data : Data
      }
    },
    methods:{
      toAnswerDetail(questionItem){
        wx.navigateTo({
          url:'/pages/answerDetail/main?questionItem=' + JSON.stringify(questionItem)
        })
      }
    }
  }
</script>

<style scoped>
  #index{
    background: #f7f7f7;
  }
  .item{
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: min-content;
    background: white;
  }
  .item img{
    border-radius: 50%;
    overflow: hidden;
    height: 80px;
    width: 80px;
  }
  .info{
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 50px;
  }
  .title{
    margin-top: 0.2rem;
    font-weight: bold;
    font-size: 0.38rem;
  }
  .time{
    margin-top: 0.23rem;
    color: gray;
    font-size: 0.26rem;
  }
  .btn{
    margin-top: 0.5rem;
    margin-right: 0.2rem;
    font-size: 0.29rem;
    background: red;
    color: white;
    width: 1.8rem;
    height: 0.7rem;
    border-radius: 1rem;
  }
</style>
